<template>
  <view class="sku-selector">
    <block v-for="(sku, index) in skus" :key="index">
      <view class="item">
        <button v-if="isSelectedSku(sku.id)" class="button active" size="mini" plain="true">
          {{ sku.name }}
        </button>
        <button v-else @click="selectValue(sku.id)" class="button" size="mini"plain="true">
          {{ sku.name }}
        </button>
      </view>
    </block>
  </view>
</template>

<script>
import store from "store";
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "ProductSkuSelectorCom",
  store,
  computed: {
    ...mapGetters([
      'skus',
      'selectedSku',
			'product'
    ])
  },
  methods: {
    ...mapActions(['directSelectSku']),
    isSelectedSku(skuId) {
      if (this.selectedSku) {
        return this.selectedSku.id === skuId
      }
      return false
    },
    selectValue(skuId) {
      this.directSelectSku(skuId)
    }
  },
	mounted() {
		if(this.product.is_gold_bean){
			this.directSelectSku(this.skus[0].id)
		}
	}
}
</script>

<style lang="scss" scoped>
.sku-selector {
  display: flex; flex-direction: row; justify-content: flex-start;
  margin-top:16rpx;
  .item {
	margin-left:20rpx;
    .button {
      // width: 140rpx;
			height: 48rpx; 
			line-height: 48rpx;
      background: #f2f2f2;
			
       font-size: 24rpx;
      margin-right: 20rpx;
	  border:1rpx solid #f2f2f2;
	 border-radius: 10rpx;
    }
    .active {
      background: #fff;
		color:#D84C29;
		 border: 1px solid #D84C29;
		 border-radius: 10rpx;;
    }
  }
}
</style>
